<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/cookie.js"></script>
</head>

<body>
    <!-- div.form>p*4>label{用户名:}+input+span.user_span -->

    <!-- div.form#one{123123}*10    10个li  .form  #one -->
    <!-- div.form#one${123123_$$}*10                     -->

    <!-- >    +  -->
    <!-- <div><span></span><i></i></div> -->


    <div class="form">
        <p><label for="">用户名:</label><input type="text" class="user"><span class="user_span"></span></p>
        <p><label for="">密&emsp;码:</label><input type="text" class="pwd"><span class="pwd_span"></span></p>
        <p><label><input type="checkbox" class="isRem">记住该账号?</label></p>
        <p><input type="submit" class="subBtn" value="登录"><input type="reset" value="重置"></p>
    </div>


</body>

<script>
    // 注册
    // 1. 用户名 密码 手机号 邮箱 全都符合验证条件(规则) 才可以注册
    // 2. 使用cookie模拟注册(数据库)    存储数据cookie(user,pwd ,phone,email)

    // 登录  
    // 1. 同时存在用户名和密码时判断
    // 2. 如何判断?    用户输入的用户名和密码   和  cookie中的用户名,密码做比较
    //    (1)   如果能找到用户名 (该用户存在|不存在)   => 在对比密码(相同|不相同)   
    // 3. 登陆成功  存储cookie  => lgc   标志用户身份(存用户名)   并进入index页面


    var userInp = document.querySelector(".user");
    var pwdInp = document.querySelector(".pwd");
    var isRem = document.querySelector(".isRem");
    var subBtn = document.querySelector(".subBtn");


    subBtn.onclick = function () {
        // 用户输入的用户名和密码
        var user = userInp.value;
        var pwd = pwdInp.value;
        if (user && pwd) {
            if (getCookie("user_" + user)) {
                console.log("存在,转去判断密码");
                if (pwd == getCookie("pwd_" + user)) {
                    if (isRem.checked) {
                        setCookie("lgc", user, 31);
                    } else {
                        setCookie("lgc", user);
                    }
                    location.href = "./index.html";
                } else {
                    alert("用户名或密码有误!");
                }

            } else {
                alert("该用户未注册!");
            }
        }
    }




</script>

</html>